<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前台客户</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
    <script>
        $(function(){
            $('#dg').datagrid({
                data: {
                    total: 20,
                    rows: [
                        { id: '1', name: '张三', phone: '13813901055', address: '南京大行宫', status: '0' },
                        { id: '2', name: '李四', phone: '13813901055', address: '南京新街口', status: '0' },
                        { id: '3', name: '王五', phone: '13813901055', address: '南京夫子庙', status: '1' },
                        { id: '4', name: '赵六', phone: '13813901055', address: '南京玄武湖', status: '1' },
                        { id: '5', name: '乔七', phone: '13813901055', address: '南京紫荆山', status: '0' },
                    ]
                },
                columns: [[
                    { title: '姓名', field: 'name', width: '20%', align: 'center' },
                    { title: '电话', field: 'phone', width: '20%', align: 'center' },
                    { title: '地址', field: 'address', width: '20%', align: 'center' },
                    {
                        title: '状态', field: 'status', width: '20%', align: 'center', formatter: function (value, row, index) {
                            return value == 1 ? '启用' : '禁用';
                        }
                    },
                    {
                        title: '操作', field: 'id', width: '20%', align: 'center', formatter: function (value, row) {
                            var str = row.status == 1 ? '禁用' : '启用';
                            return '<button class="easyui-linkbutton">' + str + '</button>'
                        }
                    },
                ]],
                title: '前台客户列表',
                iconCls: 'icon-save',
                width: '100%',
                singleSelect: true,
                rownumbers: true,
                pagination: true,
                pageSize: 5,
                pageList: [5, 10, 20],
                toolbar: '#tb'
            });

            /**
             * 初始化添加窗口
             */
            $('#dd_add').dialog({
                title: '添加用户',
                width: 500,
                closed: true,
                modal: true,
                iconCls: 'icon-save',
                buttons: [{
                    text: '提交',
                    iconCls: 'icon-ok',
                    handler: function () {

                    }
                }, {
                    text: '关闭',
                    iconCls: 'icon-no',
                    handler: function () {
                        $('#dd_add').dialog('close');
                    }
                }]
            });

            /**
             * 初始化修改窗口
             */
            $('#dd_modify').dialog({
                title: '修改用户',
                width: 500,
                closed: true,
                modal: true,
                iconCls: 'icon-save',
                buttons: [{
                    text: '提交',
                    iconCls: 'icon-ok',
                    handler: function () {

                    }
                }, {
                    text: '关闭',
                    iconCls: 'icon-no',
                    handler: function () {
                        $('#dd_modify').dialog('close');
                    }
                }]
            });

            // 点击后查询用户并显示修改对话框
            $('#btn_modify').click(function () {
                var row = $('#dg').datagrid("getSelected");
                if (row == null) {
                    $.messager.alert('提示', '请先选择要修改的用户！', 'info');
                    return;
                }

                $('#dd_modify').dialog('open');
            });
        });
    </script>
</head>
<body>
    <!-- 工具栏 start -->
    <div id='tb'>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="$('#dd_add').dialog('open')">新增</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" id="btn_modify">修改</a>
        &nbsp;&nbsp;&nbsp;
        <input class="easyui-textbox" data-options="label:'姓名：',labelWidth:50" style="width:190px;height:25px;">&nbsp;
        <input class="easyui-textbox" data-options="label:'电话：',labelWidth:50" style="width:190px;height:25px;">&nbsp;
        <select class="easyui-combobox" data-options="label:'状态：',labelWidth:50,panelHeight:'auto'" style="width:190px;height:25px;">
            <option>--请选择状态--</option>
            <option value="1">启用</option>
            <option value="0">禁用</option>
        </select> &nbsp;
        <a href="#" class="easyui-linkbutton" data-options="height:25,iconCls:'icon-search'">搜索</a>
    </div>
    <!-- 工具栏 end -->

    <!-- 添加对话框 start -->
    <div id="dd_add" style="text-align: center;padding-top: 30px;">
        <form id="ff_add">
            <div style="margin-bottom:30px">
                <input class="easyui-textbox" data-options="label:'姓名:',required:true" style="width: 250px;height: 30px" id="name_add">
            </div>
            <div style="margin-bottom:30px">
                <input class="easyui-textbox" data-options="label:'电话:',required:true" style="width: 250px;height: 30px" id="phone_add">
            </div>
            <div style="margin-bottom:30px">
                <input class="easyui-textbox" data-options="label:'地址:',required:true" style="width: 250px;height: 30px" id="address_add">
            </div>
        </form>
    </div>
    <!-- 添加对话框 end -->

    <!-- 修改对话框 start -->
    <div id="dd_modify" style="text-align: center;padding-top: 30px;">
        <form id="ff_modify">
            <input id="id_modify" type="hidden">
            <div style="margin-bottom:30px">
                <input class="easyui-textbox" data-options="label:'姓名:',required:true" style="width: 250px;height: 30px" id="name_modify">
            </div>
            <div style="margin-bottom:30px">
                <input class="easyui-textbox" data-options="label:'电话:',required:true" style="width: 250px;height: 30px" id="phone_modify">
            </div>
            <div style="margin-bottom:30px">
                <input class="easyui-textbox" data-options="label:'地址:',required:true" style="width: 250px;height: 30px" id="address_modify">
            </div>
        </form>
    </div>
    <!-- 修改对话框 end -->

    <!-- 数据展示 start -->
    <table id="dg"></table>
    <!-- 数据展示 end -->

</body>
</html>